<template>
  <a-card :style="{ width: '100%' }">
    <h1>{{ userName }} {{ counter }}</h1>
    <a-space>
      <a-input v-model="userName" :style="{ width: '320px' }" placeholder="Please enter something" allow-clear />
      <a-button type="primary" @click="handleChangeName">+1</a-button>
      <a-button type="primary" @click="handleRest">重置</a-button>
    </a-space>
  </a-card>
</template>

<script lang="ts" setup name="Settings">
  import { storeToRefs } from 'pinia'
  import { useLoginStore } from '@/store'

  const loginStore = useLoginStore()

  const { userName, counter } = storeToRefs(loginStore)
  const handleChangeName = () => {
    loginStore.counter += 1
  }
  const handleRest = () => {
    loginStore.$reset()
  }
</script>
